import React from 'react';
import { Layout, Card, Row, Col, Typography, Spin } from 'antd';
import { useRequest } from 'ahooks';
import metahumanService from '@/api/services/metahumanService';
import '../styles/matahuman-manager.css';
import { Button, Empty } from '@/components/eai-design';
import { CircleLoading } from '@/components/loading';
import AppTable from './app-table';
import { TabKeys } from '@/types/metahuman';

const { Content } = Layout;


interface MetahumanUsageProps {
  permissionFlag: boolean;
  jumpToPermission: () => void;
}

const MetahumanUsage: React.FC<MetahumanUsageProps> = ({ permissionFlag, jumpToPermission }) => {

  const { data: connectionData, loading: connectionLoading } = useRequest(
    async () => {
      const response = await metahumanService.getMetahumanConnectionStatus();
      console.log('connectionData', response);
      return response.resources;
    },
    {
      manual: false,
      onError: (error) => {
        console.error('获取数字人连接状态失败:', error);
      }
    }
  );

  const { data: permissionData, loading: permissionLoading } = useRequest(
    async () => {
      const response = await metahumanService.getMetahumanPermissionStatus();
      return response.resources;
    },
    {
      manual: false, // 如果传入了props数据，则手动触发
      onError: (error) => {
        console.error('获取数字人权限状态失败:', error);
      }
    }
  );


  if (connectionLoading || permissionLoading) {
    return (
      <Layout style={{ background: 'transparent' }}>
        <Content>
          <CircleLoading />
        </Content>
      </Layout>
    );
  }
  

  return (
    <Layout className="!bg-[transparent]">
      <Content className="flex justify-center items-start h-full">
        {(connectionData && connectionData.length > 0) ?
          <AppTable dataSource={connectionData} loading={connectionLoading} tabValue={TabKeys.USAGE}/> :
          !permissionFlag && permissionData && permissionData.length === 0 ?
            <div className="flex flex-col items-center justify-center py-12">
              <Empty fontText="您还没有添加可使用数字人的应用" />
              <Button
                className="mt-6 border !border-@brand-color !text-@brand-color"
                onClick={jumpToPermission}
              >
                去添加
              </Button>
            </div>
            :
            <div className="flex flex-col items-center justify-center py-12">
              <Empty fontText="暂无数据" />
            </div>
        }
      </Content>
    </Layout>
  );
};

export default MetahumanUsage; 